/**
 * @fileoverview Select screen for Coding in Chrome editor.
 *
 * @license Copyright 2018 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.SelectScreenWelcome autoescape="strict"}


/**
 * Welcome screen.
 */
{template .template}
  {@param debug: bool}
  {@param experimental: bool}
  {@param prefix: string}
  {@param version: string}

  {call cwc.soy.SelectScreenTemplate.container data="all"}
    {param id: 'welcome' /}
    {param header kind="html"}
      {call .header_ data="all"}
        {param title: '@@WELCOME_SCREEN__TITLE' /}
        {param text: '@@WELCOME_SCREEN__DESCRIPTION' /}
      {/call}

      {call .banner_ data="all" /}

      {call cwc.soy.SelectScreenTemplate.header}
        {param title: '@@WELCOME_SCREEN__HEADER' /}
        {param opt_text: '@@WELCOME_SCREEN__CHOOSE' /}
        {param opt_icon: 'extension' /}
      {/call}
    {/param}

    {param content kind="html"}

      <div id="cwc-select-screen-link-normal-mode" class="mdl-card mdl-card--expand mdl-shadow--3dp mdl-color--lime">
        <div class="mdl-card__title"><h4 class="mdl-card__title-text">{msg desc=""}@@WELCOME_SCREEN__BEGINNER{/msg}</h4></div>
        <div class="mdl-card__media">
          {call .blocklyExample_ /}
        </div>
        <div class="mdl-card__supporting-text">
          <span class="mdl-typography--subhead">{msg desc=""}@@WELCOME_SCREEN__BEGINNER_TEXT{/msg}</span>
        </div>
        <div class="mdl-card__actions">
          <a class="mdl-button mdl-js-button mdl-typography--text-uppercase link_normal-mode" href="#normal-mode">
            {msg desc=""}@@WELCOME_SCREEN__BEGINNER_ACTION{/msg}<i class="material-icons">chevron_right</i></a>
        </div>
      </div>

      <div id="cwc-select-screen-link-advanced-mode" class="mdl-card mdl-card--expand mdl-shadow--3dp mdl-color--amber">
        <div class="mdl-card__title"><h4 class="mdl-card__title-text">{msg desc=""}@@WELCOME_SCREEN__ADVANCED{/msg}</h4></div>
        <div class="mdl-card__media">
          {call .editorExample_ /}
        </div>
        <div class="mdl-card__supporting-text">
          <span class="mdl-typography--subhead">{msg desc=""}@@WELCOME_SCREEN__ADVANCED_TEXT{/msg}</span>
        </div>
        <div class="mdl-card__actions">
          <a class="mdl-button mdl-js-button mdl-typography--text-uppercase link_advanced-mode" href="#advanced-mode" data-upgraded=",MaterialButton">
            {msg desc=""}@@WELCOME_SCREEN__ADVANCED_ACTION{/msg}<i class="material-icons">chevron_right</i></a>
        </div>
      </div>

    {/param}
  {/call}

  <div id="{$prefix}sub-note" class="mdl-grid">
    <label for="{$prefix}show-welcome" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
      <input type="checkbox" id="{$prefix}show-welcome" class="mdl-checkbox__input">
      <div class="mdl-checkbox__label">
        {msg desc=""}@@WELCOME_SCREEN__SHOW_ON_STARTUP{/msg}
        <span class="mdl-card__supporting-text">
          ({msg desc=""}@@WELCOME_SCREEN__SHOW_ON_STARTUP_NOTE{/msg})
        </span>
      </div>
    </label>
  </div>

{/template}


/**
 * Header template.
 */
{template .header_ private="true"}
  {@param prefix: string}
  {@param title: string}
  {@param text: string}
  {@param? opt_text: string}
  {@param? opt_action: string}

  <div id="{$prefix}band">
    <div id="{$prefix}band-logo" class="material-icons">school</div>
    <div id="{$prefix}band-text">
      <div class="mdl-typography--headline mdl-typography--font-thin">
        {msg desc=""}{$title}{/msg}
      </div>
      <p class="mdl-typography--title mdl-typography--font-thin">
        {msg desc=""}{$text}{/msg}
      </p>
      {if $opt_text}
        <p id="{$prefix}band-sub-text">
          {$opt_text}
        </p>
      {/if}
      {if $opt_action}
        <p id="{$prefix}band-action" class="mdl-typography--font-regular mdl-typography--text-uppercase">
          {$opt_action}<i class="material-icons">chevron_right</i>
        </p>
      {/if}
    </div>
  </div>
{/template}


/**
 * Banner template.
 */
{template .banner_ private="true"}
  {@param debug: bool}
  {@param experimental: bool}
  {@param prefix: string}
  {@param version: string}

  {if $debug}<div id="{$prefix}debug">Debug mode</div>{/if}
  {if $experimental}<div id="{$prefix}experimental">Experimental mode</div>{/if}
  {if $version}<div id="{$prefix}version">{$version}</div>{/if}
{/template}


/**
 * Blockly example
 */
{template .blocklyExample_ private="true"}
  <div id="blocklyExampleDiv"></div>
  <xml id="blocklyExampleToolbox" style="display: none">
    <block type="controls_repeat_ext">
      <value name="TIMES">
        <shadow type="math_number">
          <field name="NUM">10</field>
        </shadow>
      </value>
    </block>
    <block type="controls_if"></block>
  </xml>
  <xml id="blocklyExampleWorkspace" style="display: none">
    <variables>
      <variable type="">var1</variable>
    </variables>
    <block type="controls_repeat_ext" x="20" y="20">
      <value name="TIMES">
        <shadow type="math_number">
          <field name="NUM">10</field>
        </shadow>
      </value>
      <statement name="DO">
        <block type="controls_if"></block>
      </statement>
    </block>
  </xml>
{/template}


/**
 * Editor example
 */
{template .editorExample_ private="true"}
  <textarea id="codeMirrorExample">{literal}
// My first program
const HELLO = 'Hello World!';
for (let i = 0; i < 10; i++) {
  if (...) {

  }
}
{/literal}
  </textarea>
{/template}
